<script lang="ts" setup>
// @ts-ignore
import {getRandomLink} from "~/server/friend.service";
// @ts-ignore
import SystemConfig from "~/config/SystemConfig";
// @ts-ignore
import {getRandomArticle} from "~/server/article.service";
// @ts-ignore
import {ArticlePath} from "~/config/SystemConfig";

const randomLinkList = ref([] as any)
const createTime = SystemConfig.createTime
const randUrl = ref('' as any)
const randTitle = ref('' as any)
const randCover = ref('' as any)
const randArticleAbstract = ref('' as any)

function getRandomLinkList() {
    const params = {count: 10}
    getRandomLink(params).then(({data}: any) => {
        randomLinkList.value = data.data
    })
}

function getRandomOne() {
    const params = {size: 1}
    getRandomArticle(params).then(({data}: any) => {
        randUrl.value = data.data[0].id
        randTitle.value = data.data[0].articleTitle
        randCover.value = data.data[0].articleCover
        randArticleAbstract.value = data.data[0].articleAbstract
    })
}

const appStore = useAppStore()
let websiteConfig = computed(() => {
    return appStore.websiteConfig
})
onMounted(() => {
    getRandomLinkList()
    getRandomOne()
})
</script>

<template>
    <footer class="site-footer blur-saturate">
        <div class="site-footer-top">
            <div class="logo"></div>
            <div class="footer-menu">
                <div class="footer-left">
                    <div class="footer-tens">
                        <h6 rel="footer-title">今天是风记得的</h6>
                        <h1 class="days">第{{ timeDifference(websiteConfig.websiteCreateTime) }}天星辰</h1>
                    </div>
                    <div class="footer-rand">
                        <a class="post" :href='ArticlePath.Path + randUrl'>
                            <span class="title">随机阅读「{{ randTitle }}」</span>
                            {{ randArticleAbstract }}
                        </a>
                        <img :src='randCover' :alt='randTitle'
                             class="loaded"
                             loading="lazy">
                    </div>
                </div>
                <div class="footer-friends">
                    <h6>壹行随十人</h6>
                    <ul>
                        <template v-for="item in randomLinkList">
                            <li>
                                <a :href='item.linkAddress' rel="noopener" :title='item.linkIntro'
                                   target="_blank">{{ item.linkName }}</a>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
        <div class="site-footer-bottom">
            <div class="footer-bottom">
                <div class="site-link">
                    <a v-if="websiteConfig.beianNumber" target="_blank" role="button" href="//beian.miit.gov.cn">
                        <img src="@/assets/logo/icp.png" role="presentation" class="loaded" alt="">
                        <span>{{ websiteConfig.beianNumber }}</span>
                    </a>
                    <a v-if="websiteConfig.gonganBeianNumber" target="_blank" role="button"
                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=21010402000379">
                        <img src="@/assets/logo/gongan.png" role="presentation" class="loaded" alt="">
                        <span>{{ websiteConfig.gonganBeianNumber }}</span>
                    </a>
                    <a target="_blank" role="button" title="又拍云提供CDN加速和云存储"
                       href="//www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral">
                        <img src="@/assets/logo/uss-logo.svg" alt="又拍云提供CDN加速和云存储" class="loaded">
                    </a>
                </div>
                <div class="footer-info">
                    {{ websiteConfig.name }}版权所有 · 架构于
                    <a target="_blank" title="主题介绍" href="/think/theme">THYUU/星度</a>的
                    <a target="_blank" href="//nuxt.com/" title="Nuxt: The Intuitive Vue Framework · Nuxt"
                       rel="generator">NUXT</a>
                </div>
            </div>
        </div>
    </footer>
</template>
<style scoped>
@import "@/static/css/footer.css";
</style>
